<template>
	<view class="bg-gray">
		<view class="wrapper width">
			<view class="carousel">
				<carousel :res="carouselImage" class="bgshare" height='320' />
			</view>
			<u-notice-bar
				style="width: 100%;"
				mode="vertical"
				fontSize='24'
				bgColor='#E5F6E6'
				color='#333333'
				:moreIcon='true'
				volumeSize='40'
				:list="notSupportFreightGoodsList"
			></u-notice-bar>
			<view class="type bg-white">
				<view class="navs flex-row-between">
					<view class="navitem" v-for="(item,index) in navs" :key='index' @click="jump(item.url)">
						<image :src="item.navbg" class="navbg"></image>
						<view class="content flex-row-start font16">
							{{item.name}}
							<image src="https://www.haopengsong.xyz/static/index/circle.png" class="circle"></image>
						</view>
					</view>
				</view>
				<view class="typelist flex-row-start">
					<view class="typeitem" v-for="(item,index) in typeList" :key="index"  @click="jump(item.url)">
						<image :src="item.path" mode="widthFix" class="iconimg"></image>
						<view class="font font13">{{item.name}}</view>
					</view>
					<view class="typeitem"></view>
				</view>
			</view>
			<view class="type bg-white news">
				<view class="titlesp">资讯</view>
				<view>
					<view class="newitem flex-row-between flex-top" 
					 @click="jump(item.path,item.tarbar)"
					:key='index' v-for="(item,index) in news">
						<image :src="item.url" mode="widthFix" class="contentimg"></image>
						<view class="content">
							<view class="title">{{item.name}}</view>
							<view class="font font12 color6">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
import { dataCount,banner,bindWechat} from "@/api/common.js";
import pay from '@/utils/pay.js'
import storage from "@/utils/storage.js"; //缓存
import { mapMutations } from "vuex";
import { wx_login } from "@/api/login";
export default {
	data() {
		return {
			show: false,
			deliveryTime: {
				timeZh: "",
				/**选择时间的秒数 */
				timestamp: ""
			},
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/indexbanner1.jpg' },
				{ name:'https://www.haopengsong.xyz/static/indexbanner2.jpg' },
				{ name:'https://www.haopengsong.xyz/static/indexbanner3.jpg'},
			],
			notSupportFreightGoodsList:['岭尚小程序即将上线！'],
			typeList:[
				{   name:'泳池', 
					path:'https://www.haopengsong.xyz/static/index/type1.png', 
					url:'/pages/swim/index'
				},
				{ name:'乐学院', path:'https://www.haopengsong.xyz/static/index/type2.png', url:'/pages/study/index' },
				{ name:'影院', path:'https://www.haopengsong.xyz/static/index/type3.png', url:'/pages/movie/index' },
				{ name:'歌舞', path:'https://www.haopengsong.xyz/static/index/type5.png', url:'/pages/song/index' },
				{ name:'书画', path:'https://www.haopengsong.xyz/static/index/type4.png', url:'/pages/paint/index' },
				{ name:'诊疗', path:'https://www.haopengsong.xyz/static/index/type7.png', url:'/pages/treatment/index' },
				{ name:'旅游', path:'https://www.haopengsong.xyz/static/index/type8.png', url:'/pages/tourism/index' },
			],
			navs:[
				{ name:'餐饮', navbg:'https://www.haopengsong.xyz/static/index/navbg1.png', url:'/pages/food/index' },
				{ name:'棋牌', navbg:'https://www.haopengsong.xyz/static/index/navbg2.png', url:'/pages/game/index' },
				{ name:'温泉', navbg:'https://www.haopengsong.xyz/static/index/navbg3.png', url:'/pages/hotspring/index' },
				{ name:'交通指引', navbg:'https://www.haopengsong.xyz/static/index/navbg4.png', url:'/pages/jiaotong/index' },
			],
			news:[
				{
					name:'理念',
					content:'结庐在人境，而无车马喧” ，陶渊明心中的理想生活在西岭雪山下的花水湾得以呈现。森林环绕，空气清新，夏有凉风，冬有温泉',
					//url:'https://www.haopengsong.xyz/static/index/cp.png'
					url:"https://www.haopengsong.xyz/static/lilian.jpg",
					path:'/pages/product/detail'
				},
				{
					name:'生活服务',
					content:'社区将为业主提供全方位，全过程生活服务，设有近6000㎡服务用房及17000㎡活动场地，包括食堂，棋牌室，影院，歌舞厅，书画活动室，温泉池，游泳池和诊所。室内均设有新风系统',
					url:'https://www.haopengsong.xyz/static/index/cp.png',
					path:'/pages/product/detailsheji'
				},
				{
					name:'物业服务',
					content:'物业将提供各项生活所需的服务，包括报修、保洁、租售、民宿返租托管，房屋定时护理等',
					url:"https://www.haopengsong.xyz/static/wuye.jpg",
					path:'/pages/tabbar/roperty/index',
					tarbar:true
				}
			]
		};
	},
	components: {
		carousel: tpl_banner
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		wx_login({ wxCode:'admin_wx_code_1'}).then(res=>{
			storage.setAccessToken(res.token)
			this.getInfoFun()
		})
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		this.noticeList()
	},
	methods: {
		//获取系统消息
		noticeList(){
			this.$store.dispatch('NoticeGetList').then(res => {
				console.log('res')
			})
		},
		jump(res,tarbar){
			if(tarbar){
				uni.switchTab({
					url: res
				})
			}else{
				uni.navigateTo({
					url: res
				});
			}
		},
		confirm(){}
	}
};
</script>

<style lang="scss" scoped>
/**去除scroll-view的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.navitem{
	width: 48%;
	height: 70px;
	position: relative;
	margin-bottom: 10px;
	.navbg,.content{
		height: 70px;
		width: 100%;
		left:0;
		top:0;
		z-index: 2;
		position: absolute;
	}
	.content{
		line-height: 70px;
		z-index: 3;
		color:#fff;
		padding: 0 12px;
		.circle{
			width: 16px;
			height: 16px;
			margin-left: 10px;
		}
	}
}
.type{
	border-radius: 12px;
	padding:12px;
	margin-top: 15px;
	.typeitem{
		flex: 0 0 25%; 
		text-align: center;
		margin-top: 10px;
		.iconimg{
			width: 40px;
			height: 40px;
			display: inline-block;
		}
	}
	/* .typeitem:nth-child(1),.typeitem:nth-child(5){
		text-align: left;
		.iconimg{
			position: relative;
			left: -10px;
		}
	}
	.typeitem:nth-child(4n){
		text-align: right;
		.font{
			
		}
	} */
}
.news{
	margin-bottom: 20px;
	.newitem{
		padding: 15px 0;
		border-bottom: 1px solid #ececec50;
	}
	.newitem:last-child{
		border:none;
	}
	.contentimg{
		width: 35%;
		height: 160px;
		border-radius: 8px;
	}
	.content{
		width: 60%;
		.title{
			margin-bottom: 10px;
		}
		.font{
			height: 44px;
			line-height: 22px;
			display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: normal;
		}
	}
}
.carousel{
	margin-bottom: 20px;
}
</style>